   :root {
       --primary: #165DFF;
       --primary-light: #E8F3FF;
       --primary-dark: #0E42D2;
       --secondary: #36CFC9;
       --secondary-light: #E6FFFA;
       --success: #52C41A;
       --warning: #FAAD14;
       --danger: #FF4D4F;
       --dark-100: #F5F7FA;
       --dark-200: #E5E6EB;
       --dark-300: #C9CDD4;
       --dark-400: #86909C;
       --dark-500: #4E5969;
       --dark-600: #272E3B;
       --dark-700: #1D2129;
       --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
       --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
       --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
       --radius-sm: 4px;
       --radius: 6px;
       --radius-lg: 8px;
       --radius-full: 999px;
       --transition: all 0.2s ease;
       --transition-slow: all 0.35s ease;
   }

   body {
       background-color: #FAFAFA;
       color: var(--dark-700);
       line-height: 1.5;
       padding: 0;
   }

   .container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 24px;
   }

   /* 顶部导航栏 */
   .navbar {
       background-color: #fff;
       box-shadow: var(--shadow-sm);
       padding: 16px 0;
       position: sticky;
       top: 0;
       z-index: 100;
   }

   .navbar-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .logo {
       display: flex;
       align-items: center;
       gap: 8px;
       font-weight: 600;
       font-size: 18px;
       color: var(--primary);
   }

   .logo i {
       font-size: 22px;
   }

   .nav-links {
       display: flex;
       gap: 24px;
   }

   .nav-link {
       color: var(--dark-500);
       text-decoration: none;
       font-size: 14px;
       font-weight: 500;
       transition: var(--transition);
   }

   .nav-link:hover,
   .nav-link.active {
       color: var(--primary);
   }

   /* 主内容区 */
   .main-content {
       padding: 40px 0 60px;
   }

   /* 标题区域 */
   .page-header {
       margin-bottom: 32px;
       position: relative;
   }

   .breadcrumb {
       display: flex;
       align-items: center;
       gap: 8px;
       color: var(--dark-400);
       font-size: 14px;
       margin-bottom: 12px;
   }

   .breadcrumb i {
       font-size: 12px;
   }

   .breadcrumb a {
       color: var(--dark-400);
       text-decoration: none;
       transition: var(--transition);
   }

   .breadcrumb a:hover {
       color: var(--primary);
   }

   .title-section {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       flex-wrap: wrap;
       gap: 16px;
   }

   .title-content {
       max-width: 80%;
   }

   .main-title {
       font-size: 28px;
       font-weight: 600;
       color: var(--dark-700);
       margin-bottom: 8px;
       line-height: 1.3;
   }

   .title-description {
       color: var(--dark-500);
       font-size: 16px;
       margin-bottom: 16px;
   }

   .status-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 4px 12px;
       background-color: var(--primary-light);
       color: var(--primary);
       border-radius: var(--radius-full);
       font-size: 14px;
       font-weight: 500;
   }

   .status-badge i {
       font-size: 10px;
       animation: pulse 2s infinite;
   }

   @keyframes pulse {
       0% {
           opacity: 1;
       }

       50% {
           opacity: 0.5;
       }

       100% {
           opacity: 1;
       }
   }

   .action-buttons {
       display: flex;
       gap: 12px;
       align-items: center;
   }

   .btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 8px 16px;
       border-radius: var(--radius);
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
       transition: var(--transition);
       border: none;
       outline: none;
   }

   .btn-outline {
       background-color: transparent;
       border: 1px solid var(--dark-200);
       color: var(--dark-600);
   }

   .btn-outline:hover {
       border-color: var(--primary);
       color: var(--primary);
       background-color: var(--primary-light);
   }

   .btn-primary {
       background-color: var(--primary);
       color: #fff;
   }

   .btn-primary:hover {
       background-color: var(--primary-dark);
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
   }

   .btn-primary:active {
       transform: translateY(0);
   }

   /* 请求地址栏 */
   .request-container {
       background-color: #fff;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       padding: 20px;
       margin-bottom: 36px;
       transition: var(--transition-slow);
   }

   .request-container:hover {
       box-shadow: var(--shadow);
   }

   .request-header {
       display: flex;
       align-items: center;
       margin-bottom: 16px;
       gap: 12px;
   }

   .request-label {
       font-size: 14px;
       font-weight: 500;
       color: var(--dark-500);
   }

   .method-badge {
       padding: 6px 12px;
       border-radius: var(--radius);
       font-size: 14px;
       font-weight: 600;
       text-transform: uppercase;
       background-color: var(--primary);
       color: #fff;
       letter-spacing: 0.5px;
   }

   .request-url {
       display: flex;
       align-items: center;
       gap: 16px;
       flex-wrap: wrap;
   }

   .url-input {
       flex: 1;
       min-width: 280px;
       padding: 10px 16px;
       background-color: var(--dark-100);
       border: 1px solid var(--dark-200);
       border-radius: var(--radius);
       font-family: 'Fira Code', monospace;
       font-size: 14px;
       color: var(--dark-700);
       transition: var(--transition);
   }

   .url-input:focus {
       outline: none;
       border-color: var(--primary);
       background-color: #fff;
   }

   /* 内容区块通用样式 */
   .section {
       margin-bottom: 40px;
   }

   .section-header {
       margin-bottom: 16px;
   }

   .section-title {
       font-size: 20px;
       font-weight: 600;
       color: var(--dark-700);
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 8px;
   }

   .section-title i {
       color: var(--primary);
       font-size: 20px;
   }

   .section-description {
       color: var(--dark-500);
       font-size: 14px;
       max-width: 800px;
   }

   /* 卡片容器样式 */
   .card {
       background-color: #fff;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       overflow: hidden;
       transition: var(--transition-slow);
       padding: 0;
   }

   .card:hover {
       box-shadow: var(--shadow);
   }

   .card-header {
       padding: 16px 20px;
       border-bottom: 1px solid var(--dark-200);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .card-title {
       font-size: 16px;
       font-weight: 500;
       color: var(--dark-700);
   }

   .card-body {
       padding: 0;
   }

   /* 请求参数表格 */
   .param-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 14px;
   }

   .param-table th,
   .param-table td {
       padding: 14px 20px;
       text-align: left;
       border-bottom: 1px solid var(--dark-200);
   }

   .param-table th {
       font-weight: 600;
       color: var(--dark-500);
       background-color: var(--dark-100);
       position: relative;
   }

   .param-table th:after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 20px;
       right: 20px;
       height: 2px;
       background-color: var(--primary);
       transform: scaleX(0);
       transition: transform 0.3s ease;
   }


   .param-table tr:last-child td {
       border-bottom: none;
   }

   .param-table tr:hover td {
       background-color: rgba(22, 93, 255, 0.02);
   }

   .param-name {
       font-weight: 500;
       color: var(--dark-700);
   }

   .param-type {
       color: var(--primary);
       background-color: var(--primary-light);
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 12px;
       display: inline-block;
   }

   .required {
       color: var(--danger);
       font-weight: 500;
   }

   .optional {
       color: var(--success);
       font-weight: 500;
   }

   .default-value {
       font-family: 'Fira Code', monospace;
       color: var(--dark-600);
       background-color: var(--dark-100);
       padding: 2px 6px;
       border-radius: 3px;
       font-size: 12px;
   }

   /* 代码示例区域 */
   .code-tabs {
       display: flex;
       background-color: var(--dark-100);
       border-bottom: 1px solid var(--dark-200);
       overflow-x: auto;
       scrollbar-width: thin;
   }

   .code-tabs::-webkit-scrollbar {
       height: 4px;
   }

   .code-tabs::-webkit-scrollbar-thumb {
       background-color: var(--dark-300);
       border-radius: 2px;
   }

   .code-tab {
       padding: 14px 20px;
       background: transparent;
       border: none;
       font-size: 14px;
       font-weight: 500;
       color: var(--dark-500);
       cursor: pointer;
       white-space: nowrap;
       transition: var(--transition);
       position: relative;
   }

   .code-tab:hover {
       color: var(--primary);
       background-color: rgba(22, 93, 255, 0.05);
   }

   .code-tab.active {
       color: var(--primary);
       background-color: #fff;
   }

   .code-tab.active:after {
       content: '';
       position: absolute;
       bottom: -1px;
       left: 0;
       right: 0;
       height: 3px;
       background-color: var(--primary);
   }

   .code-example {
       display: none;
       padding: 0;
   }

   .code-example.active {
       display: block;
   }

   .code-content {
       position: relative;
       padding: 0 10px;
   }

   .code-copy-btn {
       position: absolute;
       top: 12px;
       right: 12px;
       background-color: rgba(255, 255, 255, 0.9);
       border: 1px solid var(--dark-200);
       border-radius: var(--radius);
       padding: 4px 10px;
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       color: var(--dark-500);
       cursor: pointer;
       transition: var(--transition);
       z-index: 10;
       backdrop-filter: blur(4px);
   }

   .code-content .code-copy-btn {
       top: 28px;
       right: 20px;
   }

   .code-copy-btn:hover {
       background-color: #fff;
       border-color: var(--primary);
       color: var(--primary);
   }

   pre {
       margin: 0;
       overflow-x: auto;
       font-family: 'Fira Code', monospace;
       font-size: 13px;
       height: auto;
   }

   pre code {
       background-color: #101728 !important;
       border-radius: var(--radius-lg) !important;
   }

   /* 响应区域 */
   .response-tabs {
       display: flex;
       margin-bottom: 16px;
       border-bottom: 1px solid var(--dark-200);
   }

   .response-tab {
       padding: 10px 20px;
       font-size: 14px;
       font-weight: 500;
       color: var(--dark-500);
       cursor: pointer;
       transition: var(--transition);
       position: relative;
       margin-bottom: -1px;
   }

   .response-tab:hover {
       color: var(--primary);
   }

   .response-tab.active {
       color: var(--primary);
   }

   .response-tab.active:after {
       content: '';
       position: absolute;
       bottom: -1px;
       left: 0;
       right: 0;
       height: 3px;
       background-color: var(--primary);
   }

   .response-header {
       padding: 16px 20px;
       border-bottom: 1px solid var(--dark-200);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .response-status {
       display: flex;
       align-items: center;
       gap: 12px;
       font-size: 14px;
   }

   .status-code {
       padding: 3px 10px;
       border-radius: var(--radius-full);
       font-size: 13px;
       font-weight: 600;
       color: #fff;
       background-color: var(--success);
   }

   .status-code.error {
       background-color: var(--danger);
   }

   .response-body {
       padding: 20px;
   }

   /* JSON 高亮样式 */
   .json-key {
       color: #0033a0;
       font-weight: 600;
   }

   .json-string {
       color: #007600;
   }

   .json-number {
       color: #1c00cf;
   }

   .json-boolean {
       color: #c5009b;
   }

   .json-null {
       color: #8d8d8d;
   }

   /* 错误码说明 */
   .error-code-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 14px;
   }

   .error-code-table th,
   .error-code-table td {
       padding: 14px 20px;
       text-align: left;
       border-bottom: 1px solid var(--dark-200);
   }

   .error-code-table th {
       font-weight: 600;
       color: var(--dark-500);
       background-color: var(--dark-100);
   }

   .error-code-table tr:last-child td {
       border-bottom: none;
   }

   .error-code {
       font-weight: 600;
       color: var(--danger);
   }

   /* 页脚 */
   .footer {
       padding: 32px 0;
       border-top: 1px solid var(--dark-200);
       margin-top: 60px;
   }

   .footer-content {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 16px;
   }

   .footer-copyright {
       font-size: 14px;
       color: var(--dark-400);
   }

   .footer-links {
       display: flex;
       gap: 24px;
   }

   .footer-link {
       font-size: 14px;
       color: var(--dark-400);
       text-decoration: none;
       transition: var(--transition);
   }

   .footer-link:hover {
       color: var(--primary);
   }

   /* 响应式设计 */
   @media (max-width: 768px) {
       .container {
           padding: 0 16px;
       }

       .main-content {
           padding: 24px 0 40px;
       }

       .title-section {
           flex-direction: column;
           align-items: flex-start;
       }

       .title-content {
           max-width: 100%;
       }

       .main-title {
           font-size: 24px;
       }

       .request-url {
           flex-direction: column;
           align-items: stretch;
       }

       .debug-btn {
           width: 100%;
           justify-content: center;
       }

       .param-table th:nth-child(4),
       .param-table td:nth-child(4) {
           display: none;
       }

       .error-code-table th:nth-child(3),
       .error-code-table td:nth-child(3) {
           display: none;
       }

       .section-title {
           font-size: 18px;
       }

       .footer-content {
           flex-direction: column;
           align-items: center;
           text-align: center;
       }
   }

   @media (max-width: 480px) {

       .param-table th:nth-child(3),
       .param-table td:nth-child(3) {
           display: none;
       }

       .nav-links {
           display: none;
       }

       .code-tab {
           padding: 12px 14px;
           font-size: 13px;
       }

       pre {
           padding: 16px;
           font-size: 12px;
       }
   }